$(function() {

  function template(locals) {
    var buf = [];
    var jade_mixins = {};
    var jade_interp;
    var locals_for_with = locals || {};
    (function(index, photo, style, thumb) {
      buf.push("<div" + jade.attr("style", "" + style + "", true, false) + jade.attr("data-idx", "" + index + "", true, false) + jade.attr("data-photo", "" + photo + "", true, false) + ' class="pod pod-thumb"><img' + jade.attr("src", "" + thumb + "", true, false) + '/><span class="edg-t"></span><span class="edg-r"></span><span class="edg-b"></span><span class="edg-l"></span></div>');
    }).call(this, "index" in locals_for_with ? locals_for_with.index : typeof index !== "undefined" ? index : undefined, "photo" in locals_for_with ? locals_for_with.photo : typeof photo !== "undefined" ? photo : undefined, "style" in locals_for_with ? locals_for_with.style : typeof style !== "undefined" ? style : undefined, "thumb" in locals_for_with ? locals_for_with.thumb : typeof thumb !== "undefined" ? thumb : undefined);
    return buf.join("");
  }

  var curCategory = "product",
    curSeason = "spring",
    curSeasonPageIndex = 0,
    curViewData = [],
    isProcessing = false;
  var columnCount = 4,
    perPageCount = 7,
    navPodPos = 5,
    podW = 480,
    podH = 260;

  function _viewDetails(){
    var $el = $(this);
    var index = $el.data('idx');
    ImageTour.show(index,curViewData);
  }

  function _buildView(dataArr, index) {
    if (dataArr.length > 0) {
      index = index || 0;
      var data = dataArr.shift();
      data.index = index;
      var _t = index > columnCount - 1 ? "260px" : "0";
      var _l = index > columnCount - 1 ? podW * (index - columnCount) + "px" : podW * index + "px";
      if (index >= navPodPos) {
        _l = podW * (index - columnCount + 1) + "px";
      }
      if (index == navPodPos) {
        $('#products .pod-nav').css({
          width: podW + 'px',
          left: podW * (index - columnCount) + "px",
          top: '260px'
        });
      }
      data.style = "top:-100px;left:" + _l + ";width:" + podW + "px;";
      index++;
      var _str = template(data);
      $(_str).appendTo($('#products .prod-gallery')).click(_viewDetails).animate({
        top:_t
      },200);
      _buildView(dataArr, index);
    }
  }

  function _doLayout() {
    podW = Math.floor(_g.W / columnCount);
    _buildView(curViewData.slice());
  }

  function _pickUpData() {
    var data = PRODUCTS_DATA[curCategory][curSeason];
    _data = data.slice(curSeasonPageIndex * perPageCount, ((curSeasonPageIndex + 1) * perPageCount));
    if (_data.length == 0) {
      return false;
    }
    curViewData = _data;
    return true;
  }

  function _removeCurrentPageView(){
    $('#products .pod:not(.pod-nav)').animate({
        top: "1000px",
        opacity: '0.25'
      }, 1000, function() {
        
      });
  }
  function _render(){
    _removeCurrentPageView();
    setTimeout(function(){
      _doLayout();
    isProcessing  = false;
    },800);
  }
  function _bindEvent() {
    $('#products .tips .l').click(function() {
      if (isProcessing) return;
      if(curSeasonPageIndex == 0 ) return;
      isProcessing = true;
      curSeasonPageIndex--;
      if(_pickUpData()){
        _render();
      }else{
        curSeasonPageIndex++;
        isProcessing = false;
      }
    });
    $('#products .tips .r').click(function() {
      if (isProcessing) return;
      isProcessing = true;
      curSeasonPageIndex++;
      if(_pickUpData()){
        _render();
      }else{
        curSeasonPageIndex--;
        isProcessing = false;
      }
    });

    $('#products .c a').click(function(){
      var $el = $(this);
      if($el.hasClass('active')) return;
      $('#products .c a').toggleClass('active');
      curCategory = $el.data('ref');
      curSeasonPageIndex = 0;
      if(_pickUpData()){
        _render();
      }
    });

    $('#products .sub-l').click(function(){
      var $el = $(this);
      if($el.hasClass('active')) return;
      curSeason = $el.data('ref');
      $('#products .sub-l.active').removeClass('active');
      $el.addClass('active');
      if(_pickUpData()){
        _render();
      }
    });

  }

  function init() {
    if(!_g.isLoaded){
      setTimeout(init, 500);
    }else{
      if (_pickUpData()) {
      _doLayout();
    }
    _bindEvent();
    }
    
  }


  init();
});